<template>
    <div>
        <el-table :data="students" style="width: 100%">
            <el-table-column label="头像">
                <template #default="scope">
                    <img
                        v-if="scope.row.head"
                        class="head-img"
                        :src="apiUrl + '/upload/' + scope.row.head"
                    />
                    <el-image v-else>
                        <template #error>
                            <div class="image-slot">
                                <el-icon><icon-picture /></el-icon>
                            </div>
                        </template>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="gender" label="性别" />
            <el-table-column prop="age" label="年龄" />

            <el-table-column prop="classz.name" label="所属班级" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                        type="primary"
                        size="small"
                        @click="handleUpdate(scope.row.id)"
                        >修改</el-button
                    >
                    <el-button
                        type="danger"
                        size="small"
                        @click="handleDelete(scope.row.id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { getById, remove } from "../../service/student";
import { useStudentStore } from "../../stores/student";
import { url } from "../../service/index";
import { storeToRefs } from "pinia";
const studentStore = useStudentStore();
const { fetchStudent } = studentStore;
const { visible } = storeToRefs(studentStore);
const props = defineProps(["students"]);
const emits = defineEmits(["show", "setStudent", "setVisible"]);
const apiUrl = ref(url);
async function handleUpdate(id) {
    await fetchStudent(id);
    visible.value = true;
}
function handleDelete(id) {
    ElMessageBox.confirm("是否删除?", "警告", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
    }).then(async () => {
        await remove(id);
        emits("show");
    });
}
</script>
<style scoped>
.head-img {
    width: 50px;
    height: 50px;
}
</style>
